<template>
  <el-select
    v-model="status"
    :placeholder="placeholder"
    :clearable="clearable"
    :collapse-tags="collapseTag"
    collapse-tags-tooltip
    :multiple="multiple"
    @change="queryChange"
  >
    <el-option
      v-for="(item, index) in tagList"
      :key="index"
      :label="item.label"
      :value="item.id"
    />
  </el-select>
</template>
<script>
import { defineComponent, computed, ref } from "vue";
import {
  getTagsPageList,
} from "@/api/service.js";
export default defineComponent({
  name: "WebviewTag",
  props: {
    modelValue: {
      // 选中的值
      type: [String, Array],
      default: null
    },
    clearable: {
      // 可清除
      type: Boolean,
      default: false,
    },
    multiple: {
      // 可清除
      type: Boolean,
      default: false,
    },
    placeholder: {
      // 选中的部门
      type: String,
      default: "请选择界面标签",
    },
    collapseTag: {
      // 是否折叠
      type: Boolean,
      default: true
    }
  },
  emits: ["update:modelValue", "query-change"],
  setup(props, { emit }) {
    const status = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });

    const queryChange = (val) => {
      emit("query-change", val);
    };
    const tagList = ref([]);
    tagList.value = getTagsPageList()
    return {
      queryChange,
      tagList,
      status,
    };
  },
});
</script>
